<template>
    <div class="tab">
      <div class="radio-group">
        <div v-for="(tab ,index) in tabs" :key="tab.num"
              :class="{cur:num==index}"
              @click="num=index,tabChange(index)"
              class="menu">
          <div class="icon"><i :class="tab.icon" style="font-size: 25px"></i></div>
          <div class="name">{{tab.name}}</div>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import home from './home-view/home.vue'
  import activity from './home-view/home-activity.vue'
  import discount from './home-view/home-discount.vue'
  export default {
    name: 'tab',
    components: {
      home,
      activity,
      discount
    },
    data () {
      return {
        tabs: [
          {
            name: '扫码',
            icon: 'icon-ali-scan'
          },
          {
            name: '首页',
            icon: 'icon-ali-tag'
          },
          {
            name: '我的',
            icon: 'icon-ali-my'
          }
        ],
        tabView: ['activity', 'home', 'life'],
        num: 1,
        contentPage: 'home'
      }
    },
    mounted () {
      this.$router.push({name: this.contentPage})
    },
    methods: {
      tabChange (index) {
        this.contentPage = this.tabView[index]
        this.$router.push({name: this.contentPage})
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  .radio-group
    height 50px
    display -webkit-box /**采用此种横向布局方式，div的宽度会随着内容中文字的个数增长而增长**/
    -webkit-box-orient horizontal
  .menu
    text-align center
    -webkit-box-flex 1
    .name
      font-size 15px
      margin-top 8px
  .cur
    color red
</style>
